<template>
  <div class="ac-type-comp">
    <div class="line-title">
      <div class="line"></div>
      <div class="title">{{ acTypeInfo.type }}选择</div>
    </div>
    <el-form
      :model="form"
      ref="AcTypeForm"
      label-width="100px"
      class="demo-form"
    >
      <div
        class="item-selection"
        v-for="(item, index) in form.activityMerchantProdList"
        :key="index"
      >
        <div class="combination-1">
          <span>品类{{ numberToChinese(index + 1) }}</span>
          <el-button
            type="text"
            style="color: red"
            size="medium"
            v-if="index !== 0 && !disabled"
            @click="delCombination(index)"
            >删除组合</el-button
          >
        </div>
        <div class="participant-store">
          <el-form-item
            :prop="`activityMerchantProdList[${index}].activityMerchantId`"
            :rules="rules.activityMerchantId"
            label="参与商户:"
          >
            <el-select
              :disabled="disabled"
              class="form-item-width-half"
              v-model="item.activityMerchantId"
              @change="searchProdsByCurrentShop(item, index)"
              size="medium"
              placeholder="请选择参与商户"
              clearable
            >
              <el-option
                v-for="s_item in selectShopList"
                :label="s_item.label"
                :value="s_item.value"
                :key="s_item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="form-item">
          <el-row>
            <el-col :span="10">
              <el-form-item
                :prop="`activityMerchantProdList[${index}].prodIds`"
                :rules="rules.prodIds"
                label="A商品名:"
              >
                <el-cascader
                  :disabled="disabled"
                  size="medium"
                  class="form-item-width-max"
                  placeholder="请选择参与促销的A商品"
                  :clearable="true"
                  collapse-tags
                  :ref="`AProdTree`"
                  :options="item.categoryProdListTree"
                  v-model="item.prodIds"
                  :props="categoryProdProps"
                  @change="handleCategoryProdChange($event, 'AProdTree', index)"
                >
                </el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                :prop="`activityMerchantProdList[${index}].buyLimitNumber`"
                :rules="rules.buyLimitNumber"
                label-width="160px"
                label="购满第几个开始优惠:"
              >
                <el-input
                  :disabled="disabled"
                  class="form-item-width-half"
                  type="number"
                  v-integer-only
                  placeholder="请输入购满第几个开始优惠"
                  size="medium"
                  v-model="item.buyLimitNumber"
                >
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item
            :prop="`activityMerchantProdList[${index}].discountMethod`"
            :rules="rules.discountMethod"
            label="优惠方式:"
          >
            <div>
              <el-radio-group
                :disabled="disabled"
                v-model="item.discountMethod"
                @input="changeItemDiscountMethod($event, item)"
              >
                <el-radio :label="1">减价优惠</el-radio>
                <el-radio :label="2">折扣优惠</el-radio>
              </el-radio-group>
            </div>
          </el-form-item>
          <el-form-item
            :prop="`activityMerchantProdList[${index}].purchaseQuantity`"
            :rules="rules.purchaseQuantity"
            v-if="item.discountMethod == 1"
            label="优惠值:"
          >
            <div class="preferential-value">
              <el-input
                :disabled="disabled"
                class="form-item-width"
                type="number"
                @keydown.native="astrictInputE"
                @input="inputLimit($event, item, 'purchaseQuantity')"
                placeholder="请输入优惠金额"
                size="medium"
                v-model="item.purchaseQuantity"
              >
                <template slot="append">
                  <div class="append-symbol">元</div>
                </template>
              </el-input>
            </div>
          </el-form-item>

          <el-form-item
            :prop="`activityMerchantProdList[${index}].discountProportion`"
            :rules="rules.discountProportion"
            v-if="item.discountMethod == 2"
            label="优惠值:"
          >
            <div class="preferential-value">
              <el-input
                :disabled="disabled"
                class="form-item-width"
                type="number"
                @keydown.native="astrictInputE"
                @input="inputLimit($event, item, 'discountProportion')"
                placeholder="请输入折扣比例"
                size="medium"
                v-model="item.discountProportion"
              >
                <template slot="append">
                  <div class="append-symbol">%</div>
                </template>
              </el-input>
            </div>
          </el-form-item>
        </div>
      </div>
    </el-form>
    <div class="add-combination">
      <el-button
        v-if="!disabled"
        class="button"
        type="primary"
        size="small"
        @click="addCombination"
        >新增品类</el-button
      >
    </div>
  </div>
</template>

<script>
import FunMixins from "./funMixins";
import { numberToChinese } from "@/utils";
export default {
  mixins: [FunMixins],
  data() {
    return {
      form: {
        activityMerchantProdList: [
          {
            activityMerchantId: "",
            buyLimitNumber: "",
            buySpecifyNumber: "",
            discountMethod: 1, // 优惠方式 1减价优惠 2折扣优惠
            discountProportion: "", //折扣比例
            purchaseQuantity: "", //优惠金额
            prodIds: [],
            prodSpecifyIds: [],
          },
        ], //组合
      },
      rules: {
        activityMerchantId: [
          {
            required: true,
            message: "请选择参与商户",
            trigger: "change",
          },
        ],
        prodIds: [
          {
            required: true,
            message: "请选择A商品",
            trigger: "change",
          },
        ],
        prodSpecifyIds: [
          {
            required: true,
            message: "请选择B商品",
            trigger: "change",
          },
        ],
        buyLimitNumber: [
          {
            required: true,
            message: "请输入购满第几个开始优惠",
            trigger: ["change", "blur"],
          },
        ],
        buySpecifyNumber: [
          {
            required: true,
            message: "请输入B商品购买数",
            trigger: ["change", "blur"],
          },
        ],
        discountMethod: [
          {
            required: true,
            message: "请选择优惠方式",
            trigger: ["change", "blur"],
          },
        ],
        discountProportion: [
          {
            required: true,
            message: "请输入折扣比例",
            trigger: "change",
          },
        ],
        purchaseQuantity: [
          {
            required: true,
            message: "请输入优惠值",
            trigger: "change",
          },
        ],
      },
      categoryProdProps: {
        label: "name",
        value: "id",
        children: "productList",
        multiple: true,
        emitPath: false,
      },
    };
  },
  methods: {
    numberToChinese,
    addCombination() {
      this.form.activityMerchantProdList.push({
        activityMerchantId: "",
        buyLimitNumber: "",
        buySpecifyNumber: "",
        discountMethod: 1,
        discountProportion: "",
        purchaseQuantity: "",
        prodIds: [],
        prodSpecifyIds: [],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import url("./actype.scss");
</style>
